<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Welcome to UTSH</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 
        Rectangle Template 
        http://www.templatemo.com/preview/templatemo_439_rectangle
    	-->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/templatemo-style.css">
    <link rel="stylesheet" href="css/bootstrap-table.min.css">

    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    <script src="js/vue.js"></script>

</head>


<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div class="site-bg"></div>
    <div class="site-bg-overlay"></div>
    <!-- TOP HEADER -->
    <div class="top-header">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <p class="phone-info">UTSH<a href="#"> : Updated transcriptome of sugarcane hybrids </a></p>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <div class="social-icons">
                        <ul>
                            <li><a href="#" class="fa fa-facebook"></a></li>
                            <li><a href="#" class="fa fa-twitter"></a></li>
                            <li><a href="#" class="fa fa-linkedin"></a></li>
                            <li><a href="#" class="fa fa-dribbble"></a></li>
                            <li><a href="#" class="fa fa-rss"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- .top-header -->
    <div class="visible-xs visible-sm responsive-menu">
        <a href="#" class="toggle-menu">
            <i class="fa fa-bars"></i> Show Menu
        </a>
        <div class="show-menu">
            <ul class="main-menu">
                <li>
                    <a class="show-1 active homebutton" href="#"><i class=""></i>Home</a>
                </li>
                <li>
                    <a class="show-2 aboutbutton" href="#"><i class=""></i>BLAST</a>
                </li>
                <li>
                    <a class="show-3 projectbutton" href="#"><i class=""></i>AS event</a>
                </li>
                <li>
                    <a class="show-5 contactbutton" href="#"><i class=""></i>Jbrowse</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="container" id="page-content">
        <div class="row">
            <div class="col-md-9 col-sm-12 content-holder">
                <!-- CONTENT -->
                <div id="menu-container">
                    <!-- <div class="logo-holder logo-top-margin" style="margin-left: 340px; margin-top: 120px; left: 0px;">
                        <a href="#" class="site-brand"><img src="images/logo.png" alt=""></a>
                    </div> -->
                    <div id="menu-1" class="homepage home-section text-center">

                        <iframe src="./readDir.html"
                            style="width: 800px;height:700px;background-color: white;"></iframe>
                    </div>

                    <div id="menu-2" class="content about-section">
                        <div class="row">
                            <div class="col-md-24 col-sm-24">

                                <iframe frameborder="no" border="0" src="http://350ea8b8.nat123.fun:48789"
                                    style="width:1000px;height:1000px;margin-left: 15px;"></iframe>
                            </div>
                        </div>

                    </div>
                    <div id="menu-3" class="content gallery-section">
                        <div class="box-content">
                            <!-- <h3 class="widget-title">Past Projects</h3> -->
                            <div class="row">
                                <div class="input-group col-md-3" style="margin-top:0px;position: relative;">
                                    <input id="geneName" type="text" class="form-control"
                                        placeholder="input GeneName" />
                                    <span class="input-group-btn">
                                        <button id="findBtn" class="btn btn-info btn-search"
                                            style="margin-left: 10px;">Search</button>
                                    </span>
                                </div>
                                <table id="mytab" class="table table-hover table-striped"
                                    style="margin-top:10px;table-layout:fixed;word-break:break-all;"></table>
                            </div>
                        </div>
                    </div>

                    <div id="menu-4" class="content contact-section">
                        <div class="row">
                            <div class="col-md-24 col-sm-24">
                                <iframe frameborder="no" border="0" src="http://240e91d5.nat123.fun:80/jbrowse/"
                                    style="width:1000px;height:1000px;margin-left: 15px;"></iframe>
                            </div>
                        </div>
                    </div>

                </div>
            </div>


            <div class="col-md-3 hidden-sm">

                <nav id="nav" class="main-navigation hidden-xs hidden-sm" style="padding-left: 200px;">
                    <ul class="main-menu">
                        <li>
                            <a class="show-1 active homebutton" href="#"><i class=""></i>Home</a>
                        </li>
                        <li>
                            <a class="show-2 aboutbutton" href="#"><i class=""></i>BLAST</a>
                        </li>
                        <li>
                            <a class="show-3 projectbutton" href="#"><i class=""></i>AS</a>
                        </li>
                        <li>
                            <a class="show-5 contactbutton" href="#"><i class=""></i>Database</a>
                        </li>
                    </ul>
                </nav>

            </div>
        </div>
    </div>

    <!-- SITE-FOOTER -->
    <div class="site-footer">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <p>
                        Copyright &copy; 2084 UTSH GuangXi University

                        <!-- | Design: <a href="http://www.templatemo.com" target="_parent"><span class="green">free templates</span></a> -->
                    </p>
                </div>
            </div>
        </div>
    </div> <!-- .site-footer -->

    <script src="js/vendor/jquery-1.10.2.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <!-- templatemo 439 rectangle -->

    <script>
        $('#mytab').bootstrapTable({
            method: 'get',
            url: "http://localhost:8080/getData", //����·��
            striped: true, //�Ƿ���ʾ�м��ɫ
            pageNumber: 1, //��ʼ�����ص�һҳ
            pagination: true, //�Ƿ��ҳ
            sidePagination: 'client', //server:�������˷�ҳ|client��ǰ�˷�ҳ
            pageSize: 10, //��ҳ��¼��
            pageList: [5, 10, 20, 30, 50], //��ѡ��ҳ��¼��
            showRefresh: false, //ˢ�°�ť
            queryParams: function (msg) { //�ϴ��������Ĳ���
                console.log(msg); //
                var temp = { //������ڷ�������ʵ�ַ�ҳ��limit��offset�����������Ǳ����
                    // limit: msg.limit, // ÿҳ��ʾ����
                    // page: msg.offset, // SQL�����ʼ����

                    name: $("#geneName").val(), //����������
                };
                return temp;
            },
            columns: [{
                title: 'ChromosomeName',
                field: 'chromosomeName',
                align: 'center'
                //sortable : true
            }, {
                title: 'GeneName',
                field: 'geneName',
                align: 'center'
            }, {
                title: 'Type',
                field: 'type',
                align: 'center'
            }, {
                title: "AS-Feature",
                field: 'alternativeSplicingType',
                align: 'center'
            }, {
                title: "AS-Transcript",
                field: 'alternativeSplicingFeatures',
                align: 'center',
                width: 150
            }]
        });

        $("#findBtn").click(function () {
            $("#mytab").bootstrapTable('refreshOptions', {
                pageNumber: 1
            }); // pageNumber:1, ָ��ҳ��Ϊ��1ҳ
            $("#mytab").bootstrapTable('refresh');
            $("#mytab").css({ "margin-top": "10px" })


        })
    </script>
</body>

</html>